<template>
    <div class="filter-container">
      <el-form :inline="true" class="filter-form">
        <el-form-item label="价格范围">
          <el-input-number 
            v-model="localFilters.minPrice"
            :min="0"
            :precision="2"
            :formatter="priceFormatter"
            :parser="priceParser"
            placeholder="最低价"
          />
          <span class="price-separator">-</span>
          <el-input-number 
            v-model="localFilters.maxPrice"
            :min="0"
            :precision="2"
            :formatter="priceFormatter"
            :parser="priceParser"
            placeholder="最高价"
          />
        </el-form-item>
  
        <el-form-item v-if="showCategory" label="分类">
          <el-select
            v-model="localFilters.category"
            clearable
            placeholder="选择分类"
          >
            <el-option
              v-for="item in categories"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
  
        <el-form-item label="年级">
          <el-select
            v-model="localFilters.grade"
            clearable
            placeholder="选择年级"
          >
            <el-option
              v-for="grade in grades"
              :key="grade"
              :label="grade"
              :value="grade"
            />
          </el-select>
        </el-form-item>
  
        <el-form-item label="专业">
          <el-autocomplete
            v-model="localFilters.major"
            :fetch-suggestions="fetchMajors"
            placeholder="输入专业"
            :trigger-on-focus="false"
          />
        </el-form-item>
  
        <el-form-item>
          <el-button 
            type="primary" 
            @click="handleFilter"
            :loading="loading"
          >
            {{ filterButtonText }}
          </el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue'
  
  const props = defineProps({
    initialFilters: {
      type: Object,
      default: () => ({
        minPrice: null,
        maxPrice: null,
        category: '',
        grade: '',
        major: ''
      })
    },
    showCategory: Boolean,
    categories: {
      type: Array,
      default: () => [
        '乐器','数码','艺术品','美妆','书籍',
        '服饰','家居','运动户外','文具','玩具','二手教材'
      ]
    },
    grades: {
      type: Array,
      default: () => ['大一','大二','大三','大四','研一','研二','研三']
    },
    fetchMajors: {
      type: Function,
      default: async (query, cb) => cb([])
    },
    loading: Boolean,
    filterButtonText: {
      type: String,
      default: '筛选'
    }
  })
  
  const emit = defineEmits(['filter', 'reset'])
  
  const localFilters = ref({ ...props.initialFilters })
  
  const priceFormatter = (value) => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  const priceParser = (value) => value.replace(/¥\s?|(,*)/g, '')
  
  watch(() => props.initialFilters, (newVal) => {
    localFilters.value = { ...newVal }
  }, { deep: true })
  
  const handleFilter = () => {
    const cleanedFilters = Object.entries(localFilters.value).reduce((acc, [key, val]) => {
      if (val !== null && val !== '') acc[key] = val
      return acc
    }, {})
    emit('filter', cleanedFilters)
  }
  
  const handleReset = () => {
    localFilters.value = { ...props.initialFilters }
    emit('reset')
  }
  </script>
  
  <style scoped>
  .filter-container {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  .filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .price-separator {
    margin: 0 8px;
    color: #606266;
  }
  
  :deep(.el-form-item) {
    margin-bottom: 0;
  }
  
  @media (max-width: 768px) {
    .filter-form {
      flex-direction: column;
    }
    
    :deep(.el-form-item) {
      width: 100%;
    }
    
    :deep(.el-select),
    :deep(.el-input-number) {
      width: 100%;
    }
  }
  </style>